import React from 'react';
import {Menu, Icon} from 'antd';
import {Link} from 'react-router-dom';

const renderMenuItem = item => {
  if (item.key === 'app') {
    return ( // item.route 菜单单独跳转的路由
      <Menu.Item
        className={'menu-item-app'}
        key={item.key}
        onClick={() => {
        }}
      >
        {item.icon && <Icon type={item.icon}/>}
        <span className="nav-text app-right-arrow">{item.title}
          <Icon type="right" theme="outlined"/>
        </span>
      </Menu.Item>
    );
  } else {
    return ( // item.route 菜单单独跳转的路由
      <Menu.Item
        key={item.key}
      >
        <Link to={item.route || item.key}>
          {item.icon && <Icon type={item.icon}/>}
          <span className="nav-text">{item.title}</span>
        </Link>
      </Menu.Item>
    );
  }

}


export default ({menus, ...props}) => (
  <Menu {...props}>
    {menus && menus.map(item => renderMenuItem(item)
    )}
  </Menu>
);
